<script setup lang="ts">
import { ref } from 'vue'

const totalPrice = ref(12.88)
const deliveryFee = ref(3)
const cartCount = ref(3)
</script>

<template>
  <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200">
    <div class="flex items-center justify-between h-[52px] px-3">
      <!-- 左侧购物车和价格 -->
      <div class="flex items-center">
        <div class="relative">
          <div class="bg-[#0091FF] rounded-full p-2">
            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
            </svg>
          </div>
          <!-- 购物车数量标记 -->
          <div v-if="cartCount > 0" class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full min-w-[16px] h-4 flex items-center justify-center px-1">
            {{ cartCount }}
          </div>
        </div>
        <div class="ml-3">
          <div class="text-lg font-bold">¥{{ totalPrice }}</div>
          <div class="text-xs text-gray-400">另需配送费¥{{ deliveryFee }}</div>
        </div>
      </div>

      <!-- 右侧结算按钮 -->
      <button class="bg-[#2FD878] text-white px-5 py-2 rounded-full text-base" onclick="location.href='/order'">
        去结算
      </button>
    </div>
  </div>
</template>

<style scoped>
/* 如果需要额外的样式可以在这里添加 */
</style>